<!DOCTYPE html>
<html lang="zh-CN,en,default">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.1.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/avatar_logo_32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/avatar_logo_16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  
  <link rel="stylesheet" href="/lib/animate-css/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"xkyong.gitee.io","root":"/","scheme":"Gemini","version":"8.0.0-rc.5","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"valine","storage":true,"lazyload":false,"nav":null,"activeClass":"valine"},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"path":"search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}};
  </script>

  <meta name="description" content="以下列出的是我在参看各大公司的面经，汇总整理出来的比较高频出现的关于HTML的面试题，文章最后，也会给出笔者收集的关于HTML较为全面的面试题参考……">
<meta property="og:type" content="article">
<meta property="og:title" content="一文搞定HTML常见面试题">
<meta property="og:url" content="https://xkyong.gitee.io/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/index.html">
<meta property="og:site_name" content="壹小楷的前端SPACE">
<meta property="og:description" content="以下列出的是我在参看各大公司的面经，汇总整理出来的比较高频出现的关于HTML的面试题，文章最后，也会给出笔者收集的关于HTML较为全面的面试题参考……">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-09-10T06:33:48.000Z">
<meta property="article:modified_time" content="2020-09-10T07:15:08.226Z">
<meta property="article:author" content="壹小楷">
<meta property="article:tag" content="面试">
<meta property="article:tag" content="html">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://xkyong.gitee.io/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>一文搞定HTML常见面试题 | 壹小楷的前端SPACE</title>
  






  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <main class="main">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader">
        <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">壹小楷的前端SPACE</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签<span class="badge">3</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类<span class="badge">2</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档<span class="badge">2</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <section class="post-toc-wrap sidebar-panel">
          <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#meta%E6%A0%87%E7%AD%BE%E7%9A%84%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7%EF%BC%9F"><span class="nav-number">1.</span> <span class="nav-text">meta标签的常见属性？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#charset%E5%B1%9E%E6%80%A7%EF%BC%88HTML5%EF%BC%89"><span class="nav-number">1.1.</span> <span class="nav-text">charset属性（HTML5）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#name-content%E5%B1%9E%E6%80%A7"><span class="nav-number">1.2.</span> <span class="nav-text">name + content属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#http-equiv-content%E5%B1%9E%E6%80%A7"><span class="nav-number">1.3.</span> <span class="nav-text">http-equiv + content属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-%E7%A9%BA-void-%E5%85%83%E7%B4%A0%E6%9C%89%E9%82%A3%E4%BA%9B%EF%BC%9F%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="nav-number">2.</span> <span class="nav-text">行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内块元素有哪些？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E3%80%81%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E3%80%81%E7%A9%BA%E5%85%83%E7%B4%A0%E5%92%8C%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%E5%AE%9A%E4%B9%89%EF%BC%9F"><span class="nav-number">3.</span> <span class="nav-text">块级元素、行内元素、空元素和行内块元素定义？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0%E5%92%8C%E9%9D%9E%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0"><span class="nav-number">4.</span> <span class="nav-text">置换元素和非置换元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="nav-number">5.</span> <span class="nav-text">如何理解语义化标签</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE%E6%A6%82%E5%BF%B5"><span class="nav-number">5.1.</span> <span class="nav-text">语义化标签概念</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AF%AD%E4%B9%89%E5%8C%96%E7%9A%84%E5%A5%BD%E5%A4%84"><span class="nav-number">5.2.</span> <span class="nav-text">语义化的好处</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E6%A1%A3%E5%A3%B0%E6%98%8E%EF%BC%88Doctype%EF%BC%89%E5%92%8C%E6%9C%89%E4%BD%95%E4%BD%9C%E7%94%A8-%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%B7%B7%E6%9D%82%E6%A8%A1%E5%BC%8F%E5%A6%82%E4%BD%95%E5%8C%BA%E5%88%86%EF%BC%9F%E5%AE%83%E4%BB%AC%E6%9C%89%E4%BD%95%E6%84%8F%E4%B9%89"><span class="nav-number">6.</span> <span class="nav-text">文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E4%B8%8E%E6%B7%B7%E6%9D%82%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%8C%BA%E5%88%86%EF%BC%88HTML4%EF%BC%89"><span class="nav-number">6.1.</span> <span class="nav-text">严格模式与混杂模式的区分（HTML4）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#title%E5%B1%9E%E6%80%A7%E5%92%8Calt%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="nav-number">7.</span> <span class="nav-text">title属性和alt属性的区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#src%E5%B1%9E%E6%80%A7%E5%92%8Chref%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="nav-number">8.</span> <span class="nav-text">src属性和href属性的区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#link-%E4%B8%8E-import-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="nav-number">9.</span> <span class="nav-text">link 与 @import 的区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#property%E5%92%8Cattribute%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">10.</span> <span class="nav-text">property和attribute的区别是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#html5%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B0%E7%89%B9%E6%80%A7%E3%80%81%E7%A7%BB%E9%99%A4%E4%BA%86%E9%82%A3%E4%BA%9B%E5%85%83%E7%B4%A0%EF%BC%88HTML5%E5%92%8CHTML4%E7%A9%B6%E7%AB%9F%E6%9C%89%E5%93%AA%E4%BA%9B%E4%B8%8D%E5%90%8C%EF%BC%9F%EF%BC%89"><span class="nav-number">11.</span> <span class="nav-text">html5有哪些新特性、移除了那些元素（HTML5和HTML4究竟有哪些不同？）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%A3%B0%E6%98%8E%E6%96%B9%E9%9D%A2"><span class="nav-number">11.1.</span> <span class="nav-text">声明方面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%87%E5%87%86%E6%96%B9%E9%9D%A2"><span class="nav-number">11.2.</span> <span class="nav-text">标准方面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%A0%87%E7%AD%BE%E6%96%B9%E9%9D%A2"><span class="nav-number">11.3.</span> <span class="nav-text">标签方面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7%E6%96%B9%E9%9D%A2"><span class="nav-number">11.4.</span> <span class="nav-text">属性方面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%98%E5%82%A8%E6%96%B9%E9%9D%A2"><span class="nav-number">11.5.</span> <span class="nav-text">存储方面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#API%E6%96%B9%E9%9D%A2"><span class="nav-number">11.6.</span> <span class="nav-text">API方面</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML%E6%A0%87%E7%AD%BE%E5%B5%8C%E5%A5%97%E8%A7%84%E5%88%99"><span class="nav-number">12.</span> <span class="nav-text">HTML标签嵌套规则</span></a></li></ol></div>
      </section>
      <!--/noindex-->

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="壹小楷"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">壹小楷</p>
  <div class="site-description" itemprop="description">终身学习，向死而生！</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">2</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">2</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/xkyong" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;xkyong" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:xky13802315708@163.com" title="E-Mail → mailto:xky13802315708@163.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>
  <div class="cc-license animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll animated">
    <div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://www.ruanyifeng.com/blog/archives.html" title="http:&#x2F;&#x2F;www.ruanyifeng.com&#x2F;blog&#x2F;archives.html" rel="noopener" target="_blank">阮一峰的网络日志</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://developer.mozilla.org/zh-CN/" title="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;zh-CN&#x2F;" rel="noopener" target="_blank">MDN Web 文档</a>
        </li>
    </ul>
  </div>

      </section>
    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </header>

      
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div id="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


      <div class="main-inner">
        

        <div class="content post posts-expand">
          

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://xkyong.gitee.io/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="壹小楷">
      <meta itemprop="description" content="终身学习，向死而生！">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="壹小楷的前端SPACE">
    </span>

    
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          一文搞定HTML常见面试题
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-09-10 14:33:48 / 修改时间：15:15:08" itemprop="dateCreated datePublished" datetime="2020-09-10T14:33:48+08:00">2020-09-10</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <p>以下列出的是我在参看各大公司的面经，汇总整理出来的比较高频出现的关于HTML的面试题，文章最后，也会给出笔者收集的关于HTML较为全面的面试题参考……</p>
<a id="more"></a>

<h3 id="meta标签的常见属性？"><a href="#meta标签的常见属性？" class="headerlink" title="meta标签的常见属性？"></a>meta标签的常见属性？</h3><h4 id="charset属性（HTML5）"><a href="#charset属性（HTML5）" class="headerlink" title="charset属性（HTML5）"></a>charset属性（HTML5）</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 定义网页文档的字符集 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p>解释：一般情况下，http服务端会通过http头来指定正确的编码方式，但是有些特殊的情况如使用<strong>file协议</strong>打开一个HTML文件，则没有http头，这种时候，以上的这个设置就很重要了</p>
<h4 id="name-content属性"><a href="#name-content属性" class="headerlink" title="name + content属性"></a>name + content属性</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 网页作者 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;author&quot;</span> <span class="attr">content</span>=<span class="string">&quot;开源技术团队&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 网页地址 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;website&quot;</span> <span class="attr">content</span>=<span class="string">&quot;https://sanyuan0704.github.io/frontend_daily_question/&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 网页版权信息 --&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;copyright&quot;</span> <span class="attr">content</span>=<span class="string">&quot;2018-2019 demo.com&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 网页关键字, 用于SEO --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;keywords&quot;</span> <span class="attr">content</span>=<span class="string">&quot;meta,html&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 网页描述 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;description&quot;</span> <span class="attr">content</span>=<span class="string">&quot;网页描述&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 搜索引擎索引方式，一般为all，不用深究 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;robots&quot;</span> <span class="attr">content</span>=<span class="string">&quot;all&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 移动端常用视口设置 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no&quot;</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">  viewport参数详解：</span></span><br><span class="line"><span class="comment">  width：宽度（数值 / device-width）（默认为980 像素）</span></span><br><span class="line"><span class="comment">  height：高度（数值 / device-height）</span></span><br><span class="line"><span class="comment">  initial-scale：初始的缩放比例 （范围从&gt;0 到10）</span></span><br><span class="line"><span class="comment">  minimum-scale：允许用户缩放到的最小比例</span></span><br><span class="line"><span class="comment">  maximum-scale：允许用户缩放到的最大比例</span></span><br><span class="line"><span class="comment">  user-scalable：用户是否可以手动缩放 (no,yes)</span></span><br><span class="line"><span class="comment"> --&gt;</span></span><br></pre></td></tr></table></figure>



<h4 id="http-equiv-content属性"><a href="#http-equiv-content属性" class="headerlink" title="http-equiv + content属性"></a>http-equiv + content属性</h4><p>解释：http-equiv 属性可用于模拟一个 HTTP 响应头，http-equiv 属性提供了 <a target="_blank" rel="noopener" href="https://www.runoob.com/tags/att-meta-content.html">content</a> 属性的信息/值的 HTTP 头。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- expires指定网页的过期时间。一旦网页过期，必须从服务器上下载。 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;expires&quot;</span> <span class="attr">content</span>=<span class="string">&quot;Fri, 12 Jan 2020 18:18:18 GMT&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;refresh&quot;</span> <span class="attr">content</span>=<span class="string">&quot;1; url=https://www.baidu.com&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;pragma&quot;</span> <span class="attr">content</span>=<span class="string">&quot;no-cache&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 也是设置cookie的一种方式，并且可以指定过期时间 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;set-cookie&quot;</span> <span class="attr">content</span>=<span class="string">&quot;name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/&quot;</span>/&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 使用浏览器版本 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge,chrome=1&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，content的值为default | black | black-translucent --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;apple-mobile-web-app-status-bar-style&quot;</span> <span class="attr">content</span>=<span class="string">&quot;black-translucent&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="行内元素有哪些？块级元素有哪些？-空-void-元素有那些？行内块元素有哪些？"><a href="#行内元素有哪些？块级元素有哪些？-空-void-元素有那些？行内块元素有哪些？" class="headerlink" title="行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内块元素有哪些？"></a>行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内块元素有哪些？</h3><ul>
<li>行内元素： <code>a</code>、<code>b</code>、 <code>span</code>、 <code>strong</code>、 <code>label</code>、 <code>em</code></li>
<li>块级元素： <code>div</code>、 <code>ul</code>、 <code>li</code>、 <code>dl</code>、 <code>dt</code>、 <code>dd</code>、 <code>p</code>、 <code>h1-h6</code>、 <code>blockquote</code>、<code>header</code>、<code>section</code>、<code>aside</code>、<code>footer</code></li>
<li>空元素： 即没有实际内容内容的<code>html</code>元素，如：<code>br</code>、<code>meta</code>、<code>hr</code>、 <code>link</code>、 <code>input</code>、 <code>img</code>；</li>
<li>行内块元素（inline-block）：<code>input</code>、<code>img</code>、 <code>select</code>、 <code>button</code>、 <code>textarea</code>、<code>&lt;object&gt;</code>、<code>&lt;video&gt;</code></li>
</ul>
<h3 id="块级元素、行内元素、空元素和行内块元素定义？"><a href="#块级元素、行内元素、空元素和行内块元素定义？" class="headerlink" title="块级元素、行内元素、空元素和行内块元素定义？"></a>块级元素、行内元素、空元素和行内块元素定义？</h3><ul>
<li><strong>行内元素（inline）</strong>：沿水平方向排列，宽高和垂直方向上的内外边距的设置都无效，水平方向上的内外边距设置有效，只能容纳文本或者其他行内元素；</li>
<li><strong>块级元素（block）</strong>：沿垂直方向堆叠（即独占一行），宽高和内外边距的设置都有效，可以容纳行内元素和其他元素；</li>
<li><strong>行内块元素（inline-block）</strong>：沿水平方向排列，宽高和内外边距的设置都有效，可以容纳行内元素和其他元素；<ul>
<li>行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。</li>
</ul>
</li>
<li><strong>空元素</strong>：在<code>HTML</code>元素中，没有内容的 <code>HTML</code> 元素被称为空元素。空元素是在开始标签中关闭的。<code>&lt;br&gt;</code> 就是没有关闭标签的空元素。<br>HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，<strong>这三者是可以互相转换的</strong>，使用display属性能够将三者任意转换：</li>
<li><code>display:inline;</code>转换为行内元素</li>
<li><code>display:block;</code>转换为块状元素</li>
<li><code>display:inline-block;</code>转换为行内块状元素</li>
</ul>
<h3 id="置换元素和非置换元素"><a href="#置换元素和非置换元素" class="headerlink" title="置换元素和非置换元素"></a>置换元素和非置换元素</h3><ul>
<li><p>置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容</p>
<ul>
<li>例如，浏览器会根据<code>&lt;img&gt;</code>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<code>&lt;input&gt;</code>标签的type属性来决定是显示输入 框，还是单选按钮等。 (x)html中 的<code>&lt;img&gt;</code>、<code>&lt;input&gt;</code>、<code>&lt;textarea&gt;</code>、<code>&lt;select&gt;</code>、<code>&lt;object&gt;</code> 都是置换元素。</li>
<li>这些元素往往没有实际的内容，即是一个<strong>空元素</strong>。</li>
<li>这些元素拥有内在尺寸(intrinsic dimensions)，他们可以<strong>设置width/height属性（style中）</strong>。</li>
<li>他们的性质同设置了 <code>display:inline-block</code> 的元素一致。</li>
</ul>
</li>
<li><p>非置换元素：除了置换元素以外的元素</p>
</li>
</ul>
<h3 id="如何理解语义化标签"><a href="#如何理解语义化标签" class="headerlink" title="如何理解语义化标签"></a>如何理解语义化标签</h3><h4 id="语义化标签概念"><a href="#语义化标签概念" class="headerlink" title="语义化标签概念"></a>语义化标签概念</h4><p>语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。</p>
<p>简单的讲就是，<strong>用正确的标签包含了正确的内容，使得文档结构良好，便于阅读</strong>。</p>
<h4 id="语义化的好处"><a href="#语义化的好处" class="headerlink" title="语义化的好处"></a>语义化的好处</h4><ul>
<li>用正确的标签做正确的事情；</li>
<li>去掉或者丢失样式的时候能够让页面呈现出清晰的结构；</li>
<li>方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；</li>
<li>有利于<code>SEO</code>：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；</li>
<li>便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。</li>
</ul>
<h3 id="文档声明（Doctype）和有何作用-严格模式与混杂模式如何区分？它们有何意义"><a href="#文档声明（Doctype）和有何作用-严格模式与混杂模式如何区分？它们有何意义" class="headerlink" title="文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?"></a>文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义?</h3><p>文档声明（Doctype）：为了告诉浏览器，我们写的<code>HTML</code>文档当前使用什么版本的<code>HTML</code>来写的，这样浏览器才能按照我们声明的版本来正确的解析。<br><code>&lt;!Doctype html&gt;</code>的作用：让浏览器进入标准模式，使用最新的 <code>HTML5</code>标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。</p>
<h4 id="严格模式与混杂模式的区分（HTML4）"><a href="#严格模式与混杂模式的区分（HTML4）" class="headerlink" title="严格模式与混杂模式的区分（HTML4）"></a>严格模式与混杂模式的区分（HTML4）</h4><ul>
<li><strong>严格模式</strong>： 又称为标准模式，指浏览器按照<code>W3C</code>标准解析代码；</li>
<li><strong>混杂模式</strong>： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；</li>
</ul>
<p><strong>HTML5</strong> 没有 <code>DTD</code> ，因此也就没有严格模式与混杂模式的区别，<code>HTML5</code> 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容(<strong>HTML5 没有严格和混杂之分</strong>)。<br>总的来说，<strong>严格模式让各个浏览器统一执行一套规范.兼容模式保证了旧网站的正常运行。</strong></p>
<h3 id="title属性和alt属性的区别？"><a href="#title属性和alt属性的区别？" class="headerlink" title="title属性和alt属性的区别？"></a>title属性和alt属性的区别？</h3><ul>
<li><code>alt</code>是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。</li>
<li><code>title</code>属性为设置该属性的元素提供建议性的信息（是提升用户体验的一种方式）。使用<code>title</code>属性提供非本质的额外信息。</li>
</ul>
<h3 id="src属性和href属性的区别？"><a href="#src属性和href属性的区别？" class="headerlink" title="src属性和href属性的区别？"></a>src属性和href属性的区别？</h3><ul>
<li>从定义的角度，<strong>src</strong>是<code>source</code>的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；而<strong>href</strong>是<code>Hypertext Reference</code>的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。</li>
<li>从作用的角度讲，<code>src</code>用于替换当前元素；<code>href</code>用于在当前文档和引用资源之间确立联系；</li>
<li>从浏览器解析方式的角度讲：<ol>
<li>当浏览器遇到<strong>href</strong>会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)</li>
<li>当浏览器解析到<strong>src</strong> ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)</li>
</ol>
</li>
</ul>
<h3 id="link-与-import-的区别？"><a href="#link-与-import-的区别？" class="headerlink" title="link 与 @import 的区别？"></a>link 与 @import 的区别？</h3><ul>
<li><code>link</code>属于<code>HTML</code>标签，而<code>@import</code>是<code>css</code>提供的；</li>
<li>页面被加载时，<code>link</code>会同时被加载，而<code>@import</code>引用的css会等到页面被加载完再加载；</li>
<li><code>@import</code>只在<code>IE5</code>以上才能识别，而<code>link</code>是<code>XHTML</code>标签，无兼容问题；</li>
<li><code>link</code>方式的样式的权重高于<code>@import</code>的权重。</li>
</ul>
<h3 id="property和attribute的区别是什么"><a href="#property和attribute的区别是什么" class="headerlink" title="property和attribute的区别是什么"></a>property和attribute的区别是什么</h3><ul>
<li><code>property</code>是<code>DOM</code>中的属性，是<code>JavaScript</code>里的对象;</li>
<li><code>attribute</code>是<code>HTML</code>标签上的特性，它的值只能够是字符串;<br>简单的理解就是：<code>Attribute</code>就是<code>DOM</code>节点自带的属性，例如<code>html</code>中常用的<code>id</code>、<code>class</code>、<code>title</code>、<code>align</code>等；而<code>Property</code>是这个<code>DOM</code>元素作为对象，其附加的内容，例如<code>childNodes</code>、<code>firstChild</code>等。</li>
</ul>
<h3 id="html5有哪些新特性、移除了那些元素（HTML5和HTML4究竟有哪些不同？）"><a href="#html5有哪些新特性、移除了那些元素（HTML5和HTML4究竟有哪些不同？）" class="headerlink" title="html5有哪些新特性、移除了那些元素（HTML5和HTML4究竟有哪些不同？）"></a>html5有哪些新特性、移除了那些元素（HTML5和HTML4究竟有哪些不同？）</h3><h4 id="声明方面"><a href="#声明方面" class="headerlink" title="声明方面"></a>声明方面</h4><p>HTML5 文件类型声明（&lt;!DOCTYPE&gt;）变成下面的形式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="标准方面"><a href="#标准方面" class="headerlink" title="标准方面"></a>标准方面</h4><p>HTML5的文档解析不再基于SGML(Standard Generalized Markup Language)标准，而是形成了自己的一套标准，所以不需要引用 DTD。</p>
<h4 id="标签方面"><a href="#标签方面" class="headerlink" title="标签方面"></a>标签方面</h4><p>（1）新增语义标签，其中包括：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span>、<span class="tag">&lt;<span class="name">footer</span>&gt;</span>、<span class="tag">&lt;<span class="name">section</span>&gt;</span>、<span class="tag">&lt;<span class="name">article</span>&gt;</span>、<span class="tag">&lt;<span class="name">nav</span>&gt;</span>、<span class="tag">&lt;<span class="name">hgroup</span>&gt;</span>、<span class="tag">&lt;<span class="name">aside</span>&gt;</span>、<span class="tag">&lt;<span class="name">figure</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>（2）废除了一些纯表现和对可用性产生负面影响的标签，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 纯表现标签  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">basefont</span>&gt;</span> 默认字体，不设置字体，以此渲染；</span><br><span class="line"><span class="tag">&lt;<span class="name">font</span>&gt;</span> 字体标签；</span><br><span class="line"><span class="tag">&lt;<span class="name">center</span>&gt;</span> 水平居中；</span><br><span class="line"><span class="tag">&lt;<span class="name">u</span>&gt;</span> 下划线；</span><br><span class="line"><span class="tag">&lt;<span class="name">big</span>&gt;</span>字体；</span><br><span class="line"><span class="tag">&lt;<span class="name">strike</span>&gt;</span>中横字；</span><br><span class="line"><span class="tag">&lt;<span class="name">tt</span>&gt;</span>文本等宽；</span><br><span class="line">  </span><br><span class="line"><span class="comment">&lt;!-- 对可用性产生负面影响的标签 --&gt;</span>  </span><br><span class="line"><span class="tag">&lt;<span class="name">frameset</span>&gt;</span>,<span class="tag">&lt;<span class="name">noframes</span>&gt;</span>和<span class="tag">&lt;<span class="name">frame</span>&gt;</span>；</span><br></pre></td></tr></table></figure>

<p>（3）通过增加了<code>&lt;audio&gt;、&lt;video&gt;</code>两个标签来实现对多媒体中的音频、视频使用的支持。</p>
<h4 id="属性方面"><a href="#属性方面" class="headerlink" title="属性方面"></a>属性方面</h4><p>（1）增加了一些表单属性, 主要是其中的input属性的增强，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 此类型要求输入格式正确的email地址 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">email</span> &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 要求输入格式正确的URL地址  --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">url</span> &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 要求输入格式数字，默认会有上下两个按钮 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">number</span> &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 时间系列，但目前只有 Opera和Chrome支持 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">date</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">time</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">datetime</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">datetime-local</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">month</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">week</span> &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 默认占位文字 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">text</span> <span class="attr">placeholder</span>=<span class="string">&quot;your message&quot;</span> &gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 默认聚焦属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">text</span> <span class="attr">autofacus</span>=<span class="string">&quot;true&quot;</span> &gt;</span></span><br></pre></td></tr></table></figure>

<p>（2）其他标签新增了一些属性，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- meta标签增加charset属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- script标签增加async属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>（3）使部分属性名默认具有<code>boolean</code>属性，如：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 只写属性名默认为true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>  <span class="attr">checked</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 属性名=&quot;属性名&quot;也为true --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>  <span class="attr">checked</span>=<span class="string">&quot;checked&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>



<h4 id="存储方面"><a href="#存储方面" class="headerlink" title="存储方面"></a>存储方面</h4><ol>
<li>新增<code>WebStorage</code>, 包括<code>localStorage</code>和<code>sessionStorage</code></li>
<li>引入了IndexedDB和Web SQL，允许在浏览器端创建数据库表并存储数据, 两者的区别在于IndexedDB更像是一个NoSQL数据库，而<code>WebSQL</code>更像是关系型数据库。W3C已经不再支持<code>WebSQL</code>。</li>
<li>引入了应用程序缓存器(application cache)，可对web进行缓存，在没有网络的情况下使用，通过创建cache manifest文件,创建应用缓存，为PWA(Progressive Web App)提供了底层的技术支持。</li>
</ol>
<h4 id="API方面"><a href="#API方面" class="headerlink" title="API方面"></a>API方面</h4><ul>
<li>拖拽释放<code>(Drag and drop)</code> <code>API</code>；</li>
<li>画布<code>(Canvas)</code> <code>API</code></li>
<li>地理<code>(Geolocation)</code> <code>API</code></li>
</ul>
<h3 id="HTML标签嵌套规则"><a href="#HTML标签嵌套规则" class="headerlink" title="HTML标签嵌套规则"></a>HTML标签嵌套规则</h3><p><a target="_blank" rel="noopener" href="https://www.softwhy.com/article-33-1.html">https://www.softwhy.com/article-33-1.html</a></p>
<blockquote>
<p>   其他参看链接：<br>  <a target="_blank" rel="noopener" href="https://www.nowcoder.com/tutorial/96/6bc2c10079b245f6b8f02ddb6ca571cf">校招面试考点之前端篇牛客网出品</a><br>  <a target="_blank" rel="noopener" href="https://juejin.im/post/5ed1c2cae51d45784635a50d">html篇–这可能是目前较为全面的html面试知识点了吧</a><br>  <a target="_blank" rel="noopener" href="http://47.98.159.95/my_blog/nav/">神三元的博客</a></p>
</blockquote>

    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>壹小楷
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://xkyong.gitee.io/2020/09/10/%E4%B8%80%E6%96%87%E6%90%9E%E5%AE%9AHTML%E5%B8%B8%E8%A7%81%E9%9D%A2%E8%AF%95%E9%A2%98/" title="一文搞定HTML常见面试题">https://xkyong.gitee.io/2020/09/10/一文搞定HTML常见面试题/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag"><i class="fa fa-tag"></i> 面试</a>
              <a href="/tags/html/" rel="tag"><i class="fa fa-tag"></i> html</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/08/23/%E6%B5%8B%E8%AF%95%E5%9C%A8%E6%96%87%E7%AB%A0%E4%B8%AD%E5%B5%8C%E5%85%A5%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" rel="prev" title="测试在文章中嵌入资源文件">
      <i class="fa fa-chevron-left"></i> 测试在文章中嵌入资源文件
    </a></div>
      <div class="post-nav-item"></div>
    </div>
      </footer>
    
  </article>
  
  
  



        </div>
        
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">壹小楷</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/next-boot.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  


<script>
NexT.utils.loadComments('#valine-comments', () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js', () => {
    new Valine(Object.assign({
      el  : '#valine-comments',
      path: location.pathname,
    }, {"enable":true,"appId":"CK1nfFoGTHHDmddablt7RY9P-gzGzoHsz","appKey":"vVVV6lDnqkxRmht5VM6wlfGv","placeholder":"来都来了，就不说点什么嘛~","avatar":"mm","meta":["nick","mail","link"],"pageSize":100,"language":null,"visitor":false,"comment_count":false,"recordIP":false,"serverURLs":null,"enableQQ":false,"requiredFields":[]}
    ));
  }, window.Valine);
});
</script>

</body>
</html>
